import React, { Component } from 'react'
import store from '../../redux/store'

export default class Count extends Component {

    // componentDidMount(){
    //     // 检测redux中状态的变化，只要变化，就调用render
    //     store.subscribe(()=>{
    //         this.setState({})
    //     })
    // }

    add = () => {
        const { value } = this.selectNumber
        // 通知redux改数据
        store.dispatch({ type: 'add', data: value * 1 })
    }
    minus = () => {
        const { value } = this.selectNumber
       // 通知redux改数据
       store.dispatch({ type: 'minus', data: value * 1 })
    }
    addOdd = () => {
        const { value } = this.selectNumber
        const count = store.getState()
        if (count % 2 != 0) store.dispatch({ type: 'add', data: value * 1 })
    }
    addAsync = () => {
        const { value } = this.selectNumber
        const count = store.getState()
        setTimeout(() => {
            store.dispatch({ type: 'add', data: value * 1 })
        }, 500)
    }
    render() {
        console.log(store);

        return (
            <div>
                <h1>当前求和为：{store.getState()}</h1>
                <select ref={c => this.selectNumber = c}>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
                <button onClick={this.add}>+</button>
                <button onClick={this.minus}>-</button>
                <button onClick={this.addOdd}>当前求和为奇数在加</button>
                <button onClick={this.addAsync}>异步加</button>
            </div>
        )
    }
}
